<template>
  <div style="background-color: #f5f5f5">
    <el-row class="plr-5 headStyle" :gutter="10">
      <el-col :span="18">
        <div>
          <span class="navFirst">小米商城</span>
          |
          <span class="nav">MIUI</span>
          |
          <span class="nav">IoT</span>
          |
          <span class="nav">云服务</span>
          |
          <span class="nav">天星数科</span>
          |
          <span class="nav">有品</span>
          |
          <span class="nav">小爱开放平台</span>
          |
          <span class="nav">企业团购</span>
          |
          <span class="nav">资质证照</span>
          |
          <span class="nav">协议规则</span>
          |
          <span class="nav">下载app</span>
          |
          <span class="nav">智能生活</span>
          |
        </div>
      </el-col>
      <el-col class="relative leading-10" :offset="1" :span="5">
        <el-row>
          <el-col :span="17">
            <span class="navFirst">登录</span>
            |
            <span class="nav">注册</span>
            |
            <span class="nav">消息通知</span>
          </el-col>
          <el-col :span="7">
            <div class="shopCar" style="height: 40px">
              <span>购物车（0）</span>
              <div
                  class="z-10 bg-white animate__animated  appearance absolute hidden h-28 -left-1 w-full hidden text-center"
                  style="box-shadow: 0 2px 10px rgb(0 0 0 / 15%);line-height: 7rem">
                你还没有选择
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="plr-5 mainStyle relative">
      <el-row class="items-center pt-5">
        <el-col :span="1">
          <img src="../assets/logo-mi2.png">
        </el-col>
        <el-col class="nav1" :span="13" :offset="4">
          <span>
            <span>Xiaomi 手机</span>
          <div class="animate__animated animate__fadeIn horizBar pt-7 absolute w-full z-20 left-0 hidden">
              <el-row class="border-gray-400 pt-5 bg-white pb-5 justify-center">
                <el-col :span="4">
                  <img src="../assets/miIndex/mi1.webp" class="border-r-2 border-gray-400 ">
                  <div class="phoneName pt-5 text-center">Xiaomi Civi</div>
                  <div class="price text-orange-400 text-center">2599起</div>
                </el-col>
                <el-col :span="4">
                  <img src="../assets/miIndex/mi2.webp" class="border-r-2 border-gray-400 ">
                  <div class="phoneName pt-5 text-center">Xiaomi MIX 4</div>
                  <div class="price text-orange-400 text-center">4999起</div>
                </el-col>
                <el-col :span="4">
                  <img src="../assets/miIndex/mi3.webp" class="border-r-2 border-gray-400 ">
                  <div class="phoneName pt-5 text-center">Xiaomi MIX FOLD</div>
                  <div class="price text-orange-400 text-center">7999起</div>
                </el-col>
                <el-col :span="4">
                  <img src="../assets/miIndex/mi4.webp" class="border-r-2 border-gray-400 ">
                  <div class="phoneName pt-5 text-center">Xiaomi 11 Ultra</div>
                  <div class="price text-orange-400 text-center">5499起</div>
                </el-col>
                <el-col :span="4">
                  <img src="../assets/miIndex/mi5.webp" class="border-r-2 border-gray-400 ">
                  <div class="phoneName pt-5 text-center">Xiaomi 11 Pro</div>
                  <div class="text-orange-400 text-center">4499起</div>
                </el-col>
                <el-col :span="4">
                  <img src="../assets/miIndex/mi5.webp">
                  <div class="phoneName pt-5 text-center">Xiaomi 11 青春版</div>
                  <div class="text-orange-400 text-center">1999起</div>
                </el-col>
              </el-row>
          </div>
          </span>
          <span>
               <span>
              Redmi 红米
              </span>
            </span>
          <span>电视</span>
          <span>手机</span>
          <span>平板</span>
          <span>家电</span>
          <span>路由器</span>
          <span>服务</span>
          <span>社区</span>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-input v-model="searchInfo">
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-row class="mt-6 relative">
        <el-col :span="6" class="nav2 pt-4 pb-4 bg-myBlue-one">
          <div>
            <span>手机</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>电视</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>笔记本 平板</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>家电</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>出行 穿戴</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>智能 路由器</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>电源 配件</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>健康 儿童</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>耳机 音箱</span>
            <span class="float-right"> ></span>
          </div>
          <div>
            <span>生活 箱包</span>
            <span class="float-right"> ></span>
          </div>
        </el-col>
        <el-col :span="18" :offset="6" class="hidden w-full bg-white z-30 absolute">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="flex pl-14 items-center">
                <img src="../assets/miType/1.webp" width="50">
                <div class="myInfo">Note 11 Pro系列</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex pl-14 items-center">
                <img src="../assets/miType/1.webp" width="50">
                <div class="myInfo">Note 11 Pro系列</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex pl-14 items-center w-full">
                <img src="../assets/miType/1.webp" width="50">
                <div class="myInfo">Note 11 Pro系列</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex pl-14 items-center w-full">
                <img src="../assets/miType/1.webp" width="50">
                <div class="myInfo">Note 11 Pro系列</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="18" class="relative" style="height: 472px">
          <el-carousel height="472px">
            <el-carousel-item>
              <img src="../assets/RationalChat/1.webp" class="w-full" style="height: 472px">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../assets/RationalChat/2.jpg" class="w-full" style="height: 472px">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="mt-6">
        <el-col :span="6" class="pt-3" style="background-color: #5f5750">
          <div class="myTags flex justify-around items-center">
            <div>
              <div class="cursor-pointer" style="color: #757575">
                <img src="../assets/tags/1.png" width="56" height="56">
                <div class="text-sm text-center">保障服务</div>
              </div>
              <div class="pt-3 cursor-pointer" style="color: #757575">
                <img src="../assets/tags/4.png" width="56" height="56">
                <div class="text-sm text-center">米粉卡</div>
              </div>
            </div>
            <div>
              <div class="cursor-pointer" style="color: #757575">
                <img src="../assets/tags/2.png" width="56" height="56">
                <div class="text-sm text-center">企业团购</div>
              </div>
              <div class="pt-3 cursor-pointer" style="color: #757575">
                <img src="../assets/tags/5.png" width="56" height="56">
                <div class="text-sm text-center">以旧换新</div>
              </div>
            </div>
            <div>
              <div class="cursor-pointer" style="color: #757575">
                <img src="../assets/tags/3.png" width="56" height="56">
                <div class="text-sm text-center">F码通道</div>
              </div>
              <div class="pt-3 cursor-pointer" style="color: #757575">
                <img src="../assets/tags/6.png" width="56" height="56">
                <div class="text-sm text-center">话费充值</div>
              </div>
            </div>

          </div>
        </el-col>
        <el-col :span="6">
          <img src="../assets/tags/7.jpg">
        </el-col>
        <el-col :span="6">
          <img src="../assets/tags/8.jpg">
        </el-col>
        <el-col :span="6">
          <img src="../assets/tags/9.jpeg">
        </el-col>
      </el-row>
      <el-row class="mt-10">
        <img src="../assets/bar/1.webp">
      </el-row>
      <mi-tags></mi-tags>
      <mi-tags></mi-tags>
      <mi-tags></mi-tags>
      <mi-tags></mi-tags>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {Search} from "@element-plus/icons"
import miTags from '../views/miTags.vue'
import {Ref, ref} from "vue"
import MiTags from "../views/miTags.vue";

let searchInfo: Ref<string> = ref('')
let isShow: Ref<boolean> = ref(false)
</script>
<style scoped>
input[name="search"] {
  outline: none;
  border: 1px solid #e0e0e0;
  @apply pt-5 pb-5 pl-2 w-80 h-14;
}

input[name="search"]:hover {
  border: 1px solid black
}

input[name="search"]:focus {
  border: 1px solid #ff6700
}

.plr-5 {
  padding-left: 5%;
  padding-right: 5%;
}

.headStyle {
  background-color: #333333;
  color: #b0b0b0;
  font-size: 12px;
  height: 40px;
  align-items: center;
}

.navFirst {
  padding-right: 10px;
}

.nav {
  padding-right: 10px;
  padding-left: 10px;
}

.nav:hover, .navFirst:hover {
  @apply text-white cursor-pointer
}

.shopCar {
  padding-left: 5px;
  padding-right: 5px;
  background-color: #424242;

}

.shopCar:hover {
  @apply bg-white
}

.shopCar:hover > span {
  color: #ff6700;
}

.shopCar:hover > .appearance {
  display: block;
}

.mainStyle .nav1 > span {
  font-size: 16px;
  @apply pl-4 pr-4 cursor-pointer
}

.mainStyle .nav1 > span > span:hover {
  color: #ff6700;
}

.mainStyle .nav1 > span:hover > div {
  display: block;
}

:deep(.el-input__inner):focus {
  border-color: #ff6700;
}

.mainStyle .nav2 > div {
  @apply text-white pl-10 pt-3 pb-3 pr-10 leading-5
}

.mainStyle .nav2 > div:hover {
  @apply bg-orange-500
}

.myTags div:hover {
  color: white !important;
}

.phoneName {
  color: #757575;
  font-size: 16px;
}
.myFloat>el-col {
  @apply pl-9
}
.myInfo {
  font-size: 14px;
  @apply cursor-pointer pl-3
}
.myInfo:hover {
  color: #ff6700;
}
</style>